<template>
    <div class="container">
        <div class="top-box">
            <a-breadcrumb
                :routes="[{ label: '专栏管理', path: 'content/column' }, { label: '创建专栏', path: '/content/column' },]">
            </a-breadcrumb>
            <fix-top :step="step"></fix-top>
            <div class="table-box" v-if="step == 2">
                <a-row>
                    <a-form :model="formModel" auto-label-width>
                        <a-col :flex="1">
                            <a-row :gutter="16">
                                <a-col :span="3">
                                    <a-select v-model="formModel.state">
                                        <a-option v-for="item in state" :value="item.value">{{ item.label }}</a-option>
                                    </a-select>
                                </a-col>
                                <a-col :span="3">
                                    <a-select v-model="formModel.hide">
                                        <a-option v-for="item in hideList" :value="item.value">{{ item.label
}}</a-option>
                                    </a-select>
                                </a-col>
                                <a-col :span="4.5">
                                    <a-form-item field="name" label="">
                                        <a-input max-length="30" v-model="formModel.vname" placeholder="请输入课程标题" />
                                    </a-form-item>
                                </a-col>
                                <a-col :flex="'86px'">
                                    <a-space :size="18">
                                        <a-button @click="fetchData(true)">
                                            <template #icon>
                                                <icon-search />
                                            </template>
                                            搜索
                                        </a-button>
                                        <a-button type="primary" @click="$router.push('handlecolumn')">
                                            <template #icon>
                                                <icon-plus></icon-plus>
                                            </template>
                                            添加课程
                                        </a-button>
                                        <a-button type="outline">
                                            <template #icon>
                                                <icon-delete />
                                            </template>
                                            批量删除
                                        </a-button>
                                    </a-space>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-form>
                </a-row>
                <a-table row-key="id" :row-selection="rowSelection" :loading="loading" :pagination="pagination"
                :data="renderData" :columns="columns" :bordered="false" @page-change="onChangePage($event)">
                <template #index="{ rowIndex }">
                    {{ (pagination.current - 1) * 10 + rowIndex + 1 }}
                </template>
                <template #columncard="{ record }">
                    <div class="flex-clo">
                        <a-input style="width: 300px;" v-model="record.businessName"></a-input>
                        <div class="flex ali-cen sub-info">
                            <a-button shape="round" type="outline" status="normal" size="mini">
                                未审核
                            </a-button>
                            <span class="sub-text">
                                2022-12-03 09:35:03
                            </span>
                        </div>
                    </div>
                </template>
                <template #num="{ record }">
                    <a-space direction="vertical">
                        <div class="flex ali-cen">
                            视频 <a-button size="mini" shape="round" type="outline">播放</a-button>
                        </div>
                        <div class="flex ali-cen">
                            时长：08:24
                        </div>
                        <a-button type="primary">更换视频</a-button>
                    </a-space>
                </template>
                <template #activity>
                    <a-select>
                        <a-option>横屏</a-option>
                        <a-option>竖屏</a-option>
                    </a-select>
                </template>
                <template #trysee>
                    <a-switch></a-switch>
                </template>
                <template #operate>
                    <a-space direction="vertical">
                        <a-link :hoverable="false">删除</a-link>
                    </a-space>
                </template>
            </a-table>
        </div>
        <div class="btns-row" v-if="step == 2">
                <div class="add-info">已添加2个课程，上传中0个课程。</div>
                <div class="add-btn">
                    <a-space>
                        <a-button @click="onChangeStep(1)">上一步</a-button>
                        <a-button type="primary">提交审核</a-button>
                    </a-space>
                </div>
            </div>
        </div>
        <div class="right-box" v-if="step == 1">
            <a-anchor>
                <a-anchor-link href="#info1">上架方式</a-anchor-link>
                <a-anchor-link href="#info2">基础信息</a-anchor-link>
                <a-anchor-link href="#info3">课程信息</a-anchor-link>
                <a-anchor-link href="#info4">课程配置</a-anchor-link>
                <a-anchor-link href="#info5">高级设置</a-anchor-link>
            </a-anchor>
            <mobile-phone :form="form"></mobile-phone>
        </div>
        <div class="scroll-box" v-if="step == 1">
            <a-form :model="form" layout="vertical">
                <div class="card">
                    <div class="card-title" id="info1">上架方式</div>
                    <div class="card-content">
                        <a-form-item label="选择上架方式" :rules="[{ required: true, message: '请选择上架方式' }]">
                            <a-radio-group v-model="form.type">
                                <a-radio :value="true">正常上架</a-radio>
                                <a-radio :value="false">快速上架</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <div class="tip">提示：选择正常上架，确定提审后会将专栏和专栏内所有单课同时送审，全部审核成功后即可正常售卖</div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title" id="info2">基础信息</div>
                    <div class="card-content">
                        <a-form-item label="课程名称" :rules="[{ required: true, message: '请输入课程名称' }]">
                            <a-input v-model="form.classname" placeholder="写一个合适的标题，能吸引更多人观看" :max-length="30"
                                allow-clear show-word-limit></a-input>
                        </a-form-item>
                        <a-form-item label="分类标签" :rules="[{ required: true, message: '请选择分类标签' }]">
                            <a-radio-group v-model="form.tip">
                                <a-radio v-for="item in radioList" :value="item" style="margin-right: 5px;">
                                    <template #radio="{ checked }">
                                        <div class="checkbox" :class="checked ? 'radio-check' : ''">
                                            {{ item }}
                                        </div>
                                    </template>
                                </a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title" id="info3">课程信息</div>
                    <div class="card-content">
                        <a-form-item label="课程封面" :rules="[{ required: true, message: '请输入课程名称' }]">
                            <a-space :style="{ width: '100%' }">
                                <a-upload action="/" :fileList="file ? [file] : []" :show-file-list="false"
                                    @change="onChange" @progress="onProgress">
                                    <template #upload-button>
                                        <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
    }`">
                                            <div class="arco-upload-list-picture custom-upload-avatar"
                                                v-if="file && file.url">
                                                <img :src="file.url" />
                                                <div class="arco-upload-list-picture-mask">
                                                    <IconEdit />
                                                </div>
                                                <a-progress v-if="file.status === 'uploading' && file.percent < 100"
                                                    :percent="file.percent" type="circle" size="mini" :style="{
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translateX(-50%) translateY(-50%)',
}" />
                                            </div>
                                            <div class="arco-upload-picture-card" v-else>
                                                <div class="arco-upload-picture-card-text">
                                                    <IconPlus />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </a-upload>
                                <div>
                                    <p class="tip-text">
                                        1. 图片尺寸比例为3：4，建议尺寸为690*920px <br>
                                        2. 优质的封面会极大增加曝光度哦～ <br>
                                        3. 请上传小于3M的图片
                                    </p>
                                </div>
                            </a-space>
                        </a-form-item>
                        <a-form-item label="主图" :rules="[{ required: true, message: '请上传主图' }]">
                            <a-space direction="vertical" :style="{ width: '100%' }">
                                <a-upload action="/" :fileList="file ? [file] : []" :show-file-list="false"
                                    @change="onChange" @progress="onProgress">
                                    <template #upload-button>
                                        <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
    }`">
                                            <div class="arco-upload-list-picture custom-upload-avatar"
                                                v-if="file && file.url">
                                                <img :src="file.url" />
                                                <div class="arco-upload-list-picture-mask">
                                                    <IconEdit />
                                                </div>
                                                <a-progress v-if="file.status === 'uploading' && file.percent < 100"
                                                    :percent="file.percent" type="circle" size="mini" :style="{
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translateX(-50%) translateY(-50%)',
}" />
                                            </div>
                                            <div class="arco-upload-picture-card" v-else>
                                                <div class="arco-upload-picture-card-text">
                                                    <IconPlus />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </a-upload>
                                <div>
                                    <p class="tip-text">
                                        1. 课程主图将展示于课程详情页顶部，最多可上传5张 <br>
                                        2. 建议图片比例为16:9，图片建议尺寸为690*388px <br>
                                        3. 请上传小于3M的图片
                                    </p>
                                </div>
                            </a-space>
                        </a-form-item>
                        <div class="price-box">
                            <a-form-item label="金额设置（元）" :rules="[{ required: true, message: '请设置金额' }]">
                                <a-space direction="vertical">
                                    <a-input-number v-model="form.price" placeholder="课程定价必须大于10元"></a-input-number>
                                    <p class="tip-text">提示: 如修改课程定价，课程将重新提交审核，审核期间您将不能使用修改后定价。审核通过后搭配营销工具，课程成交价可低于10元
                                    </p>
                                </a-space>
                            </a-form-item>
                            <a-form-item label="划线价格（元）">
                                <a-input-number v-model="form.orprice" placeholder="建议划线价格不低于课程价格"></a-input-number>
                            </a-form-item>
                        </div>
                        <a-form-item label="课程简介" :rules="[{ required: true, message: '请选择课程介绍' }]">
                            <a-radio-group v-model="form.classtype">
                                <a-radio :value="true">图文介绍</a-radio>
                                <a-radio :value="false">纯图介绍</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <div class="warn-text">提示:请您规范填写课程简介必填内容，否则课程将无法通过审核！</div>
                        <!-- 图文介绍 -->
                        <div class="box" v-if="form.classtype">
                            <a-form-item label="老师介绍" :rules="[{ required: true, message: '请输入老师介绍' }]">
                                <cedtior></cedtior>
                            </a-form-item>
                            <a-form-item label="课程大纲" :rules="[{ required: true, message: '请输入课程大纲' }]">
                                <cedtior></cedtior>
                            </a-form-item>
                            <a-form-item label="面向人群" :rules="[{ required: true, message: '请输入面向人群' }]">
                                <cedtior></cedtior>
                            </a-form-item>
                            <a-form-item label="学完收获" :rules="[{ required: true, message: '请输入学完收获' }]">
                                <cedtior></cedtior>
                            </a-form-item>
                            <a-form-item label="其他">
                                <cedtior></cedtior>
                            </a-form-item>
                        </div>
                        <!-- 纯图介绍 -->
                        <div class="box" v-if="!form.classtype">
                            <my-upload></my-upload>
                            <br>
                            <!-- <a-link>查看示例图</a-link> -->
                            <p class="tip-text">
                                1.最多可上传5张图片 <br>
                                2.每张图片大小不超过5M(建议宽690px)
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title" id="info4">课程配置</div>
                    <div class="card-content">
                        <a-form-item label="防录屏跑马灯" :rules="[{ required: true, message: '请选择' }]">
                            <a-radio-group v-model="form.opentype">
                                <a-radio :value="false">关闭</a-radio>
                                <a-radio :value="true">开启</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <div class="sub-tip-text">提示： <br> 1.开启后，学员观看课程时会出现您的昵称标识，可防止录屏
                            <br> 2.微信小程序暂不支持防录屏
                        </div>
                        <div class="bq-content" v-if="form.opentype">
                            <a-checkbox-group :default-value="['1']">
                                <a-checkbox value="1">昵称展示</a-checkbox>
                                <a-checkbox value="2">版权声明</a-checkbox>
                            </a-checkbox-group>
                            <div class="tip-text">开启后，学员观看课程时会出现您的昵称标识，可防止录屏</div>
                        </div>
                        <a-form-item label="课程有效期" :rules="[{ required: true, message: '请选择课程有效期' }]">
                            <a-select v-model="form.classDate" :style="{ width: '220px' }" placeholder="请选择课程有效期">
                                <a-option v-for="item in classDateList">{{ item.title }}</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="总课时" :rules="[{ required: true, message: '请输入总课时' }]">
                            <a-input-number v-model="form.classNum" :style="{ width: '260px' }"
                                placeholder="请输入总课时,最小值为1"></a-input-number>
                        </a-form-item>
                        <a-form-item label="发布平台" :rules="[{ required: true, message: '请至少选择一端发布平台' }]">
                            <a-checkbox-group v-model="form.pingtai" :default-value="['dy']">
                                <a-checkbox value="dy">抖音</a-checkbox>
                                <a-checkbox value="ks">快手</a-checkbox>
                                <a-checkbox value="wx">微信</a-checkbox>
                            </a-checkbox-group>
                        </a-form-item>
                        <div class="sub-tip-text">
                            提示：
                            <br /> 1、请选择课程发布平台，至少选择一端；
                            <br /> 2、专栏的发布平台修改后，专栏下的单课会同步进行修改，会重新提交审核；
                            <br /> 3、多端上传课程审核不通过时，须修改课程内容后重新提交审核或创建课程副本修改内容单独提交审核
                            <br /> 4、若专栏中需添加直播课，则快手不可选择
                        </div>
                        <a-form-item label="学员观看平台" :rules="[{ required: true, message: '请至少选择一端发布平台' }]">
                            <a-checkbox-group v-model="form.gkpingtai" :default-value="['dy']">
                                <a-checkbox value="dy">抖音</a-checkbox>
                                <a-checkbox value="ks">快手</a-checkbox>
                                <a-checkbox value="wx">微信</a-checkbox>
                            </a-checkbox-group>
                        </a-form-item>
                        <div class="sub-tip-text">提示：微信小程序不支持防录屏功能，有课程泄露风险，请谨慎选择</div>
                        <a-form-item label="分享标题设置" :rules="[{ required: true, message: '请选择分享图片' }]">
                            <div class="bq-content">
                                <div class="share-box">
                                    <my-upload></my-upload>
                                    <div class="inp">
                                        <a-input-group>
                                            <a-select :options="['查看', '获取', '接受', '学习', '咨询', '进入', '进行', '开启']"
                                                :style="{ width: '100px' }" placeholder="first" />
                                            <a-input :style="{ width: '160px' }" placeholder="初级吉他" />
                                            <a-select :options="['课程', '教程']" :style="{ width: '100px' }"
                                                placeholder="课程" />
                                        </a-input-group>
                                        <div class="text-row">
                                            <div class="text-title">实例文案：</div>
                                            <view class="sub-tip-text">
                                                “张老师舞蹈” <br>
                                                “初级吉他” <br>
                                                “商务英语口语” <br>
                                                (清晰、明确表明课程所授内容及所属垂类，字数不得超过8个)
                                            </view>
                                        </div>
                                    </div>
                                </div>
                                <div class="sub-tip-text">
                                    提示：建议参考规范编写，避免课程误判解绑
                                    <a-link>点击此处查看规范文档</a-link>
                                </div>
                            </div>
                        </a-form-item>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title" id="info5">高级设置</div>
                    <div class="card-content">
                        <a-form-item label="课程推广">
                            <a-radio-group v-model="form.type">
                                <a-radio :value="false">不推广</a-radio>
                                <a-radio :value="true">设置推广</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item label="虚拟购买轮播">
                            <a-radio-group v-model="form.type">
                                <a-radio :value="false">关闭</a-radio>
                                <a-radio :value="true">开启</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <div class="tip">提示：开启后，课程详情页图片左侧会有虚拟学员刚刚购买课程弹幕显示</div>
                        <a-form-item label="虚拟已学习人数">
                            <a-radio-group v-model="form.type">
                                <a-radio :value="false">关闭</a-radio>
                                <a-radio :value="true">开启</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-input-number placeholder="请输入虚拟已学习人数"></a-input-number>
                        <div class="tip">提示：虚拟已学习人数将作为课程已学习人数的基础数据，已学习人数=虚拟已学习人数+真实购买数</div>
                    </div>
                </div>
                <a-alert closable>请您遵守国家相关规定，切勿上传低俗色情、暴力恐怖、虚假谣言、营销诈骗、侵权盗版等相关内容，本平台有依据国家规定及平台规则进行处理的权利。《海豚知道服务协议》，
                    课程审核时间：每天9：00-18：00依次审核；18：30之后提交的课程次日审核，请注意提交时间。</a-alert>
                <div class="btn-row">
                    <a-button type="primary" size="large" @click="onChangeStep(2)">下一步</a-button>
                </div>
            </a-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import fixTop from './components/fixTop.vue';
import cedtior from './components/cedtior.vue';
import mobilePhone from './components/mobilePhone.vue';
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { queryList } from '@/api/list';
import { ListRecord } from '@/api/list';
const generateFormModel = () => {
    return {
        state: '全部状态',
        app: '全部平台',
        hide: '全部',
        vname: ''
    };
};
const state = [
    {
        value: '全部状态',
        label: '全部状态',
    },
    {
        value: '未审核',
        label: '未审核',
    },
    {
        value: '预审中',
        label: '预审中',
    },
    {
        value: '抖音审核中',
        label: '抖音审核中',
    },
    {
        value: '审核驳回',
        label: '审核驳回',
    },
    {
        value: '审核通过',
        label: '审核通过',
    },
]
const hideList = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '隐藏课程',
        label: '隐藏课程',
    },
    {
        value: '显示课程',
        label: '显示课程',
    },
]
const step = ref(1);
const onChangeStep = (index: number) => {
    step.value = index;
}
const form = reactive({
    type: true,
    classname: '',
    tip: '',
    price: 0,
    orprice: 0,
    classtype: true,
    opentype: false,
    classDate: '',
    pingtai: ['dy'],
    gkpingtai: ['dy'],
    classNum: 0,
})
const classDateList = [
    { title: '永久有效', value: '1' },
    { title: '30天', value: '30' },
    { title: '90天', value: '90' },
    { title: '180天', value: '180' },
    { title: '365天', value: '365' },
]
const file = ref({});
const radioList = [
    "休闲娱乐",
    "传统文化",
    "体育健身",
    "驾考",
    "人文",
    "生活知识",
    "个人管理",
    "亲子教育",
    "心里健康",
    "其他",
]
// 第二步
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const { loading, setLoading } = useLoading(true);
const renderData = ref<ListRecord>();
const formModel = ref(generateFormModel());
const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
};
const pagination = reactive({
    ...basePagination,
});
const fetchData = async (clear?: boolean) => {
    setLoading(true)
    try {
        const { data: res } = await queryList()
        console.log(res)
        renderData.value = res.data;
    } catch (error) {

    } finally {
        setLoading(false);
    }
}
fetchData();
const onChangePage = (e: number) => {
    pagination.current = e;
    fetchData();
}
const columns = [
    {
        title: '序号',
        align: 'center',
        width: 60,
        slotName: 'index'
    },
    {
        title: '标题',
        align: 'left',
        slotName: 'columncard'
    },
    {
        title: '课程信息',
        dataIndex: 'payCount',
        slotName: 'num',
        align: 'center',
        width: 100,
    },
    {
        title: '播放模式',
        slotName: 'activity',
        align: 'center',
        width: 180,
    },
    {
        title: '是否可试看',
        slotName: 'trysee',
        align: 'center',
        width: 180,
    },
    {
        title: '操作',
        align: 'right',
        width: 140,
        slotName: 'operate',
    },
];
</script>
<style scoped lang="less">
.container {
    padding: 20px;
    position: relative;

    .table-box {
        overflow-y: scroll;
        height: calc(100vh - 400px);
        background-color: #fff;
        padding: 30px 20px;
        position: relative;
    }
    .btns-row {
        .add-info {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: #888A95;
            background: #F3F4F9;
        }
        .add-btn {
            padding: 12px 20px;
            background-color: #fff;
        }
    }

    .top-box {
        position: absolute;
        width: 97%;
    }

    .scroll-box {
        overflow-y: scroll;
        height: calc(100vh - 300px);
        margin-top: 200px;
    }

    .card {
        background-color: #fff;
        border-radius: 14px;
        // width: 96%;
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;

        .card-title {
            position: relative;
            font-size: 18px;
            font-weight: 600;
            line-height: 25px;
            color: #37383C;
            margin-right: 6px;
            margin-bottom: 20px;
        }

        .card-title::before {
            content: "";
            display: block;
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 16px;
            background-color: #4E70F2;
        }

        .card-content {
            width: calc(100% - 370px);

            .tip {
                font-size: 12px;
                color: rgb(136, 138, 149);
                line-height: 17px;
                margin-top: 10px;
            }
        }
    }

    .right-box {
        position: absolute;
        right: 20px;
        top: 300px;
        display: flex;
    }
    .sub-info {
    color: #888a95;
    font-size: 12px;
    margin-top: 20px;

    span {
        margin-left: 10px;
    }
}

    .checkbox {
        padding: 0px 10px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        border: 1px solid rgb(227, 229, 238);
        border-radius: 4px;
        text-align: center;
        margin: 0px 19px 10px 0px;
        cursor: pointer;
        transition: all 0.2s ease 0s;
        position: relative;
    }

    .radio-check {
        border: 1px solid #4E70F2;
    }
}

.tip-text {
    font-size: 14px;
    color: #909399;
    line-height: 20px;
}

.sub-tip-text {
    font-size: 12px;
    color: #909399;
    line-height: 16px;
}

.price-box {
    padding: 15px 20px;
    background: #f8f9fb;
    border-radius: 4px;
}

.warn-text {
    font-size: 12px;
    color: #EEA73C;
    padding-left: 8px;
    margin-top: -10px;
}

.bq-content {
    display: inline-block;
    padding: 15px 20px;
    background: #f8f9fb;
    border-radius: 4px;
    margin-top: 16px;
}

.share-box {
    display: flex;

    .inp {
        margin-left: 20px;
        margin-top: 20px;
    }
}

.text-row {
    display: flex;
    color: #4E70F2;
    margin-top: 12px;
}
</style>